<template>
    
        <div>
            <el-card >
                <el-form :inline="true">

                    <el-form-item>
                      <el-select v-model="state.queryForm.serverGroupId" class="m-2" placeholder="服务器分组">
                        <el-option
                          v-for="item in clusterGroupList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-input v-model="state.queryForm.ip"  placeholder="IP地址" clearable></el-input>
                    </el-form-item>

                    <el-form-item>
                        <vue-button button-text="查询" @emit-event="getDataList()" :button-opr="constant.ButtonTypeMap.SelectPagerKey"></vue-button>
                    </el-form-item>

                    <el-form-item>
                        <vue-button  button-text="新增"  @emit-event="addOrUpdateHandle()" :button-opr="constant.ButtonTypeMap.AddKey"></vue-button>
                    </el-form-item>
                    
                </el-form>
            </el-card>
        </div>

        <div style="display: flex;flex-wrap: wrap;">
          <el-card v-for="item in state.dataList" class="box-card">
            <template #header>
            <div class="card-header">
              <el-switch
                  v-model="item.enable"
                  inline-prompt
                  active-text="运行"
                  inactive-text="超时"
                  disabled 
                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              />
            </div>
            </template>
            <el-form >
              <el-form-item label="IP地址:">
                {{ item.ip }}
              </el-form-item>
              <el-form-item label="服务器分组:">
                {{ item.groupName }}
              </el-form-item>
            </el-form>

            <el-divider />

            <div style="display: flex; justify-content: space-between;" >
              <vue-button :button-link=true @emit-event="addOrUpdateHandle(item.id)" button-text="删除" :button-opr="constant.ButtonTypeMap.DeleteKey"></vue-button>
              <vue-button :button-link=true @emit-event="addOrUpdateHandle(item.id)" button-text="修改" :button-opr="constant.ButtonTypeMap.UpdateKey"></vue-button>
            </div>
        </el-card>
        </div>

        <el-pagination
          :current-page="state.page"
          :page-sizes="state.pageSizes"
          :page-size="state.limit"
          :total="state.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
		    >
		    </el-pagination>

        <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>

</template>
  
  <script lang="ts" setup>
  import { ref ,reactive} from 'vue'
  import constant from '@/utils/constant'
  import AddOrUpdate from './add-or-update.vue'
  import { useCrud } from '@/hooks'
  import { PagerOptions } from '@/hooks/pager'
  import { useRoute } from 'vue-router'
  import { postReq,getRequest } from '@/utils/request'
  import uri from '@/api/uri'
  import { onMounted } from 'vue'
    

  const route = useRoute()

  const state: PagerOptions = reactive({
    queryForm: {
      serverGroupId: '',
      ip: '',
    },
    dataListUrl:  route.path,
  })


  const addOrUpdateRef = ref()
  const clusterGroupList:any = ref([])

  const addOrUpdateHandle = (id?: number) => {
	  addOrUpdateRef.value.init(id)
  }
  
  
  const getClusterGroup = ()=>{
      getRequest(uri.getServerGroup).then(res =>{
        clusterGroupList.value = res.data
      })
  }

  onMounted(() => {
		getClusterGroup()
	})
  
  const { getDataList, sizeChangeHandle, currentChangeHandle } = useCrud(state)
  </script>
  
  <style>

 .el-icon.avatar-server-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 300px;
  margin-top: 20px;
}
 
  </style>
  